{% extends 'base.html' %}

{% block title %}用户管理{% endblock %}

{% block content %}
<div class="row">
    <!-- 侧边栏（复用用户管理的侧边栏） -->
    <div class="col-md-3 col-lg-2 sidebar p-3">
        {% include 'sidebar.html' %} <!-- 假设侧边栏模板为sidebar.html -->
    </div>

    <!-- 内容区域 -->
    <div class="col-md-9 col-lg-10 p-4" id="content-user-manage">
        <h3 class="mb-4">用户管理</h3>

        <!-- 操作按钮区 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex gap-2">
                <button class="btn btn-primary" onclick="window.location.href='{% url "add_user" %}'">添加用户</button>
                <button class="btn btn-danger" id="deleteSelectedUsers">批量删除</button>
                <button class="btn btn-secondary" id="editUser">修改用户</button>
            </div>
            <div class="input-group w-50">
                <input type="text" class="form-control" id="searchKeyword" placeholder="搜索用户名/邮箱">
                <button class="btn btn-outline-secondary" id="searchButton">搜索</button>
            </div>
        </div>

        <!-- 筛选表单 -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <select class="form-select" id="statusFilter">
                    <option value="">所有状态</option>
                    <option value="active">启用</option>
                    <option value="inactive">禁用</option>
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select" id="roleFilter">
                    <option value="">所有角色</option>
                    <option value="admin">管理员</option>
                    <option value="user">普通用户</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="date" class="form-control" id="registerDateFilter" placeholder="注册时间筛选">
            </div>
        </div>

                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>电话</th>
                            <th>状态</th>
                            <th>角色</th>
                            <th>注册时间</th>
                        </tr>
                    </thead>
                    <tbody id="userTableBody">
                        {% for user in users %}
                        <tr>
                            <td><input type="checkbox" class="user-checkbox" data-user-id="{{ user.id }}"></td>
                            <td>{{ user.id }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.phone|default:"-" }}</td>
                            <td>
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input status-toggle" id="status-{{ user.id }}" {% if user.is_active %}checked{% endif %}>
                                </div>
                            </td>
                            <td>
                                <select class="form-select role-select" data-user-id="{{ user.id }}">
                                    <option value="admin" {% if user.is_admin %}selected{% endif %}>管理员</option>
                                    <option value="user" {% if not user.is_admin %}selected{% endif %}>普通用户</option>
                                </select>
                            </td>
                            <td>{{ user.date_joined|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                        <tr>
                            <td>001</td>
                            <td>admin</td>
                            <td>admin@example.com</td>
                            <td>2024-01-01</td>
                            <td><span class="badge bg-success">正常</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">编辑</button>
                                <button class="btn btn-sm btn-danger">禁用</button>
                            </td>
                        </tr>
                        <tr>
                            <td>002</td>
                            <td>user1</td>
                            <td>user1@example.com</td>
                            <td>2024-01-02</td>
                            <td><span class="badge bg-warning">待审核</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">编辑</button>
                                <button class="btn btn-sm btn-danger">禁用</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页导航 -->
        <nav class="mt-4" aria-label="用户列表分页">
            <ul class="pagination justify-content-center">
                {% if users.has_previous %}
                <li class="page-item"><a class="page-link" href="?page={{ users.previous_page_number }}">上一页</a></li>
                {% endif %}
                <li class="page-item active"><span class="page-link">第 {{ users.number }} 页 / 共 {{ users.paginator.num_pages }} 页</span></li>
                {% if users.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ users.next_page_number }}">下一页</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 侧边栏交互逻辑
    document.querySelectorAll('.list-group-item').forEach(item => {
        item.addEventListener('click', function(e) {
            document.querySelector('.list-group-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
</script>
{% endblock %}